import { BasicMarker } from '../../js/BasicMarker.js';
import { BasicMarkers } from '../../js/BasicMarkers.js';
import { getMarkerIcon } from '../../js/icon.js';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
import { handleCommonRes } from '@gis/lib/utils/resolver.js';
import { yardSpecialPeopleList } from '@gis/lib/api';

class Marker extends BasicMarker {
  constructor({ map, data }) {
    super({ map, data });
    /* this.type: 这个type主要用于筛选,需要和filter-legend里面的type相对应 */
    this.type = 'tsrq';
    super.create();
  }

  getIcon() {
    return getMarkerIcon(this.type);
  }

  getLabel() {
    const label = super.getLabel();
    label.content = `
      <div class="marker_label">
        <p class="marker_label__name">${this.data.yard_name}</p>
        <p class="marker_label__count">人群数：${this.data.people_total}</p>
      </div>`;
    return label;
  }

  onClick() {
    // dialog({
    //   content: () => import('@/views/special-crowd/components/personnel-list.vue'),
    //   contentProps: {
    //     extraParams: { yard_id: this.data.yard_id },
    //   },
    //   dialogProps: {
    //     title: '特殊人员清单',
    //     width: 'large',
    //     height: 'fixed',
    //     footer: null,
    //   },
    // });
  }
}

export default class Tsrq extends BasicMarkers {
  constructor({ map, params }) {
    super({ params });
    this.map = map;
  }

  createMarker(data) {
    return new Marker({ map: this.map, data });
  }

  async getDataAsync() {
    const { area_code } = useUserInfoStore();
    const params = Object.assign({ area_code: area_code }, this.options.params);
    const data = await handleCommonRes(yardSpecialPeopleList, params);
    return data.map((item) => Object.assign(item, { lnglat: [item.longitude, item.latitude] }));
  }
}
